.booking-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f7f8fa 0%, #e9ecef 100%);
  padding: 20rpx 20rpx 120rpx;

  /* 卡片样式 */
  .section-card {
    background: white;
    border-radius: 24rpx;
    margin-bottom: 24rpx;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    
    &:active {
      transform: translateY(-2rpx);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    }
  }

  /* 标题样式 */
  .section-title {
    padding: 30rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    gap: 16rpx;
    
    .title-icon {
      font-size: 32rpx;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }
    
    .title-text {
      font-size: 32rpx;
      font-weight: bold;
      color: white;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }
  }

  /* NutUI 表单样式覆盖 */
  .booking-form {
    margin-bottom: 24rpx;
    border-radius: 24rpx;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    
    .nut-form-item {
      padding: 30rpx;
      border-bottom: 1px solid #f7f8fa;
      
      &:last-child {
        border-bottom: none;
      }
      
      .nut-form-item__label {
        font-size: 32rpx;
        font-weight: 600;
        color: #323233;
        margin-bottom: 16rpx;
      }
      
      .nut-radio-group {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;
        
        .nut-radio {
          margin-right: 0;
          
          .nut-radio__label {
            font-size: 28rpx;
            color: #646566;
            padding: 16rpx 24rpx;
            border: 2rpx solid #ebedf0;
            border-radius: 20rpx;
            transition: all 0.3s ease;
          }
          
          &.nut-radio--checked .nut-radio__label {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-color: #667eea;
          }
        }
      }
      
      .nut-input {
        --nutui-input-border-color: #ebedf0;
        --nutui-input-border-focus-color: #667eea;
        --nutui-input-font-size: 28rpx;
        --nutui-input-padding: 24rpx;
        --nutui-input-border-radius: 16rpx;
        --nutui-input-background-color: #f7f8fa;
        
        &:focus {
          --nutui-input-background-color: white;
          box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
        }
      }
      
      .nut-inputnumber {
        .nut-inputnumber__btn {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
          border: none;
          font-size: 28rpx;
          font-weight: bold;
          
          &:active {
            transform: scale(0.9);
          }
          
          &:disabled {
            background: #c8c9cc;
          }
        }
        
        .nut-inputnumber__input {
          font-size: 32rpx;
          font-weight: bold;
          color: #323233;
          background: #f7f8fa;
          border: 2rpx solid #ebedf0;
          border-radius: 16rpx;
          margin: 0 20rpx;
          min-width: 100rpx;
          text-align: center;
        }
      }
      
      .nut-textarea {
        --nutui-textarea-border-color: #ebedf0;
        --nutui-textarea-border-focus-color: #667eea;
        --nutui-textarea-font-size: 28rpx;
        --nutui-textarea-padding: 24rpx;
        --nutui-textarea-border-radius: 16rpx;
        --nutui-textarea-background-color: #f7f8fa;
        min-height: 120rpx;
        
        &:focus {
          --nutui-textarea-background-color: white;
          box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
        }
      }
    }
  }

  /* 价格卡片 */
  .price-card {
    border-radius: 24rpx;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2rpx solid #667eea;
    margin-bottom: 24rpx;
    
    .price-info {
      padding: 40rpx;
      
      .price-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        &.discount {
          color: #07c160;
          
          .price-value {
            color: #07c160;
          }
        }
        
        &.total {
          padding-top: 20rpx;
          border-top: 2rpx solid #ebedf0;
          
          .price-label {
            font-size: 36rpx;
            font-weight: bold;
          }
          
          .total-price {
            font-size: 40rpx;
            font-weight: bold;
            color: #ee0a24;
          }
        }
        
        .price-label {
          font-size: 30rpx;
          color: #323233;
        }
        
        .price-value {
          font-size: 30rpx;
          color: #646566;
        }
      }
    }
  }

  /* 提交区域 */
  .submit-section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 30rpx;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    z-index: 100;
    
    .submit-btn {
      width: 100%;
      height: 100rpx;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      border-radius: 24rpx;
      font-size: 36rpx;
      font-weight: bold;
      box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
      transition: all 0.3s ease;
      
      &:active {
        transform: translateY(-2rpx);
        box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4);
      }
    }
  }
}

/* NutUI 组件样式覆盖 */
.nut-card {
  --nutui-card-border-radius: 24rpx;
  --nutui-card-padding: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.nut-button {
  --nutui-button-border-radius: 24rpx;
  --nutui-button-large-height: 100rpx;
  --nutui-button-large-font-size: 36rpx;
}

.nut-datepicker,
.nut-picker {
  .nut-popup {
    border-radius: 24rpx 24rpx 0 0;
  }
  
  .nut-picker__toolbar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    .nut-picker__cancel,
    .nut-picker__confirm {
      color: white;
      font-weight: 600;
    }
    
    .nut-picker__title {
      color: white;
      font-weight: bold;
    }
  }
}

/* 响应式适配 */
@media screen and (max-width: 375px) {
  .booking-page {
    padding: 15rpx 15rpx 100rpx;
    
    .booking-form,
    .price-card {
      margin-bottom: 20rpx;
    }
    
    .nut-form-item {
      padding: 24rpx;
      
      .nut-radio-group {
        gap: 16rpx;
        
        .nut-radio .nut-radio__label {
          padding: 12rpx 20rpx;
          font-size: 26rpx;
        }
      }
    }
    
    .price-info {
      padding: 30rpx;
    }
    
    .submit-section {
      padding: 24rpx;
      
      .submit-btn {
        height: 88rpx;
        font-size: 32rpx;
      }
    }
  }
}